<template>
    <div id="oldtrade" class="oldversion">
        <div class='fixed_top'>
            <div class='liuhai'></div>
            <van-nav-bar @click-left='goback'>
                <template #left>
                    <van-icon :name="require('@/assets/images/leftback_black.png')"></van-icon>
                </template>
                <template #title>
                    <div class="textL disFlex">
                        <div class="font40 fontBlack2">期望行业</div>
                        <div class="font40 fontBlack2"><span class="font40 fontGreenBlue">({{select_count}}</span>/3)</div>
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="topheader title">
            <!-- <div class="pt08 font28 fontBlack73 textL">请选择行业，最多3个</div> -->
            <van-collapse v-model="activeNames">
                <van-collapse-item class="textL" v-for="(item, i) in selectList" :title="item.name" :name="item.id" :key="i">
                    <span @click.stop="changeBox(itm, i)" :class="checkList.indexOf(itm) > -1 ? 'yesindu' : 'noindu'" class="industry font36" v-for="(itm, i) in item.children" :key="i">{{itm.name}}</span>
                </van-collapse-item>
            </van-collapse>
        </div>
        <div v-if="checkList.length > 0" class="oldbottom1">
            <div class="select_flex">
                <div class="font36 fontBlack73">已选</div>
                <div class="over">
                    <div class="pd1" v-for="(item, i) in checkList" :key="i">
                        <div class="disFlex select">
                            <span class="font36 fontGreenBlue">{{item.name}}</span>
                            <img @click="del(i)" :src="require('@/assets/images/select_close.png')" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div @click="sub" class="font36 fontGreenBlue">确定</div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
import { getCurrentInstance, reactive } from 'vue'
export default {
    data() {
        return {
            select_count: 0,
            activeNames: [], //只为展开和收起
            selectList: [],
            checkList: []
        }
    },
    mounted() {
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        var that = this;
        var resumeqz = that.$store.state.resumeqz;
        that.api.get('/personnel/h5/resumeInfo/getIndustryTree', {}).then(res => {
            var data = res.data;
            var arr = [];
            var inx;
            for(let i = 0; i < data.length; i++) {
                var obj = {};
                obj.name = data[i].chName;
                obj.code = data[i].code;
                obj.id = data[i].id;
                obj.children = [];
                for(let f = 0; f < data[i].children.length; f++) {
                    var select = {};
                    select.name = data[i].children[f].chName;
                    select.code = data[i].children[f].code;
                    obj.children.push(select);
                };
                arr.push(obj);
            };
            arr.splice(inx, 1);
            if(resumeqz.profession) {
                var profession = resumeqz.profession.split(',');
                var arr1 = [];
                for(let j = 0; j < profession.length; j++) {
                    for(let k = 0; k < arr.length; k++) {
                        if(profession[j] == arr[k].code) {
                            var obj = {};
                            obj.name = arr[k].name;
                            obj.code = arr[k].code;
                            arr1.push(obj);
                        }
                    }
                }
                that.checkList = arr1;
            }
            that.selectList = arr;
        })
    },
    methods: {
        sub() {
            var data = [];
            for(let i = 0; i < this.checkList.length; i++) {
                data.push(this.checkList[i].code);
            };
            var resumeqz = this.$store.state.resumeqz;
            if(data.length > 0) {
                resumeqz.profession = data.join(',');
                this.$store.commit('setresumeqz', resumeqz);
                this.$router.replace('/oldintention');
            } else {
                Toast('至少选择一个行业');
            }
        },
        goback() {
            this.$router.replace('/oldintention');
        },
        changeBox(item, i) {
            if(this.checkList.indexOf(item) == -1) {
                if(this.select_count < 3) {
                    this.checkList.push(item);
                    this.select_count++;
                } else {
                    Toast('至多选择三种行业');
                }
            } else {
                var inx = this.checkList.indexOf(item);
                this.checkList.splice(inx, 1);
                this.select_count--;
            }
        },
        // 删除已选中的某一项
        del(i) {
            this.checkList.splice(i, 1);
            this.select_count--;
        }
    }
}
</script>
<style src="@/assets/css/trade.css"></style>
<style scoped>
#trade {
    width: 100%;
    height: 100%;
}
.title {
    padding: 0 0.32rem 0 0.32rem;
}
.pt08 {
    padding-top: 0.08rem;
}
.industry {
    padding: 0.08rem 0.12rem;
    border-radius: 0.08rem;
    margin-right: 0.16rem;
    margin-top: 0.16rem;
    display: inline-block;
}
/* .industry:first-child {
    margin-left: 0;
} */
.yesindu {
    color: #428FFC;
    background-color: white;
    border: 0.02rem solid #428FFC;
}
.noindu {
    color: #363A44;
    background-color: #E8E9EC;
}
.bottom1 {
    position: fixed;
    bottom: 0;
    height: 1.14rem;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.32rem;
    border-top: 0.02rem solid #E8E9EC;
}
.select {
    margin-left: 0.16rem;
    padding: 0.06rem 0.12rem;
    border: 0.02rem solid #428FFC;
    border-radius: 0.08rem;
}
.select img {
    width: 0.24rem;
    margin-left: 0.12rem;
}
.select_flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.over {
    overflow: scroll;
    max-height: 1.16rem;
    padding: 0.1rem;
    max-width: 5.5rem;
}
/* .over div {
    display: inline-block;
} */
.pd1 {
    padding: 0.1rem 0;
}
.fixed_top {
    background-color: white;
}
</style>